<template>
  <div class="goodsdetail" v-if="Object.keys(goodsdetail).length !== 0">
    <!-- 有的商品有可能没有商品详情，这里我们需要判断一下进行显示 -->
    <!-- 商品详情信息 -->
    <div class="goodsdetail-desc">
      <div class="start">
      </div>
      <div class="desc">{{goodsdetail.desc}}</div>
      <div class="end"></div>
    </div>
    <div class="goodsdetail-key">{{goodsdetail.detailImage[0].key}}</div>
    <div class="goodsdetail-list">
      <img v-for="(item, index) in goodsdetail.detailImage[0].list" :src="item">
    </div>
  </div>
</template>

<script>
export default {
  name: 'detailgoodsdetail',
  props: {
    goodsdetail: {
      type: Object,
      detail() {
        return {}
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.goodsdetail
  padding 20px 0
  .goodsdetail-desc
    padding 0 15px
    .start,.end
      width: 90px
      height: 1px
      background-color: #a3a3a5
      position: relative
    .start
      float: left
      &::after
        content: ''
        position: absolute
        width: 5px
        height: 5px
        background-color: #333
        bottom: 0
    .desc
      padding: 15px 0
      font-size: 14px
    .end
      float: right
      &::before
        content: ''
        position: absolute
        right: 0
        bottom: 0
        width: 5px
        height: 5px
        background-color: #333
  .goodsdetail-key
    margin 10px 0 10px 15px
    font-size 15px
    color #333
  .goodsdetail-list
    img
      width 100%
</style>